<template>
	<view class="chat-gpt">
		<scroll-view style="height:calc(100vh - 80px)" :scroll-y="true" :scroll-with-animation="true"
			@scrolltoupper="scrolltoupper" :scroll-into-view="scrollBottom" @scrolltolower="scrolltolower"
			@scroll="scroll">
			<Dialogue />
			<view id="scrollBottomId"></view>
		</scroll-view>
		<view class="send-nav">
			<view class="cancle" @click="cancleRequest" v-if="chatStatus">
				<image src="/static/chat/stop_it.png" mode="" style="width: 18px;height: 18px;"></image>
				<span style="color: #8a8a8a;margin-left: 2px;">取消对话</span>
			</view>
			<!-- 文字 -->
			<view class="nav-content" v-if="type == 1">
				<u--image src="/static/chat/voice.png" :width="32" :height="32" @click="type = 2"></u--image>
				<u--input shape="circle" :readonly="chatStatus" :placeholder="!chatStatus?'今天的你有什么想说的吗?':'回复中,请等待...'"
					:placeholderStyle="placeholderStyle" :customStyle="{margin:'0 20rpx',background:'#ffffff'}"
					border="none" v-model="prompt"></u--input>
				<u--image src="/static/chat/send.png" :width="32" :height="32" @click="chat"></u--image>
			</view>
			<!-- 语音 -->
			<view class="nav-content" v-if="type == 2">
				<u--image src="/static/chat/keyboard.png" :width="32" :height="32" @click="type = 1"></u--image>
				<u-button type="primary" shape="circle" text="按住说话"></u-button>
				<u--image src="/static/chat/send.png" :width="32" :height="32"></u--image>
			</view>
			<image src="/static/chat/nav-bg.png" class="nav_bg"></image>
		</view>
	</view>
</template>

<script>
	import Dialogue from './components/dialogue.vue'
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		components: {
			Dialogue
		},
		computed: {
			...mapState(['chatStatus'])
		},
		watch: {
			chatStatus: {
				handler(value) {
					this.scrollBottom = ''
					this.$nextTick(() => {
						this.scrollBottom = 'scrollBottomId'
					})
				},
				immediate: true
			}
		},
		data() {
			return {
				scrollBottom: '',
				// 1 文字输入 2语音
				type: 1,
				placeholderStyle: {
					color: '#2D2D2D',
					fontSize: '28rpx',
				},
				width: uni.getSystemInfoSync().windowWidth,
				prompt: ''
			};
		},
		onLoad() {},
		onShow() {
			uni.showTabBar()
		},
		methods: {
			...mapActions(['startMessage', 'cancleRequest']),
			chat() {
				if (this.chatStatus) {
					uni.showToast({
						icon: 'error',
						title: "请等待回复后再继续..."
					})
					return
				}
				this.startMessage(this.prompt);
				this.prompt = ''
			},
			scrolltoupper() {
				console.log("到顶");
			},
			scrolltolower() {
				console.log("到低");
			},
			scroll(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-gpt {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.scroll-chat {
			flex: 1;
			overflow: auto;
		}

		.send-nav {
			height: 88px;
			position: relative;
			padding: 0 20rpx;
			overflow: hidden;
			text-align: center;
			background: linear-gradient(to bottom, transparent, #fff);

			.cancle {
				font-size: 12px;
				position: absolute;
				left: 50%;
				top: 10px;
				transform: translate(-50%, -50%);
				display: flex;
				align-items: center;
				z-index: 8;
			}

			.nav-content {
				position: relative;
				top: 0;
				left: 0;
				display: flex;
				width: 100%;
				height: 100%;
				z-index: 3;
				align-items: center;

				&::v-deep {
					.u-input {
						background-color: #fff !important;
						height: 40px;
					}

					.u-button {
						margin: 0 20rpx;
					}

					.u-input__content__field-wrapper__field {
						padding: 0 40rpx;
					}
				}
			}

			.nav_bg {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 80%;
				z-index: 1;
			}
		}
	}
</style>